<template>
  <view class="container">
    <view class="content">
      <view class="mains-all d-rn d-ac">
        <view class="mains-all-title">
          <text>{{ $t('shift') }}</text>
        </view>
        <scroll-view
          scroll-x="true"
          scroll-with-animation
          :scroll-into-view="minSelCrt"
          :enable-flex="true"
          :show-scrollbar="false"
          class="scrollview-box"
        >
          <view class="mains-all-one">
            <text
              @click="handleGourl(item, index)"
              :id="'minCla' + index"
              v-for="(item, index) in numList"
              :key="index"
              :class="tabNum == index ? 'actives' : 'outactives'"
              >{{ item }}</text
            >
          </view>
        </scroll-view>
      </view>
      <view class="mains-all">
        <view class="mains-all-title">
          <text>{{ $t('cycle_shift') }}</text>
        </view>
        <scroll-view
          scroll-x="true"
          scroll-with-animation
          :scroll-into-view="minSelCrts"
          :enable-flex="true"
          :show-scrollbar="false"
          class="scrollview-box"
        >
          <view class="mains-all-one">
            <text
              @click="handleGourls(item, index)"
              :id="'minClas' + index"
              v-for="(item, index) in numList"
              :key="index"
              :class="tabNums == index ? 'actives' : 'outactives'"
              >{{ item }}</text
            >
          </view>
        </scroll-view>
      </view>
      <view class="mains-all">
        <view class="mains-all-title">
          <text>{{ $t('status') }}</text>
        </view>
        <scroll-view
          scroll-x="true"
          scroll-with-animation
          :scroll-into-view="minSelCrtss"
          :enable-flex="true"
          :show-scrollbar="false"
          class="scrollview-box"
        >
          <view class="mains-all-one">
            <text
              @click="handleGourlss(item, index)"
              :id="'minClass' + index"
              v-for="(item, index) in numList"
              :key="index"
              :class="tabNumss == index ? 'actives' : 'outactives'"
              >{{ item }}</text
            >
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="rili">
      <u-calendar
        ref="calendar"
        :maxDate="maxDate"
        :minDate="minDate"
        @handleGetRiFather="handleGetRiFather"
      ></u-calendar>
      <!-- <u-calendar ref="calendar" :listss="listss" v-if="listss && listss.length"></u-calendar> -->
    </view>

    <view class="big">
      <view class="clockIn-order-bto">
        <view class="clockIn-order-bto-title d-rn d-ac d-jb">
          <text>{{ $t('clockIn_order_details') }}</text>
          <text>梁朝伟 发布于 2022.9.31 08</text>
        </view>
        <view class="clockIn-order-bto-one d-rn d-ac d-jb">
          <text>上下班时间</text>
          <text>2022.11.21 09:00-202</text>
        </view>
        <view class="clockIn-order-bto-one d-rn d-ac d-jb">
          <text>客户名称</text>
          <text>新浪娱乐</text>
        </view>
        <view class="clockIn-order-bto-one d-rn d-ac d-jb">
          <text>上班地点</text>
          <text>北京是朝阳区北辰世纪中心A座</text>
        </view>
        <view class="clockIn-order-bto-one d-rn d-ac d-jb">
          <text>备注</text>
          <text>今日联系20个客户，并预估成单率</text>
        </view>
      </view>
    </view>

    <view class="footer d-rn d-ac d-ja">
      <text class="d-rn d-ac d-jc">批量排班</text>
      <text class="d-rn d-ac d-jc">编辑排班</text>
      <text class="d-rn d-ac d-jc">保存</text>
      <text class="d-rn d-ac d-jc">发布</text>
    </view>
  </view>
</template>

<script>
var _self;
export default {
  data() {
    return {
      show: true,
      mode: "range",
      phoneInfo: uni.getSystemInfoSync(),
      topTitBox: 0,
      tabNum: 0,
      // 中部分类==选择
      minCla: 0,
      // 底部分类滑动描点
      minSelCrt: null,
      numList: [
        "班次1",
        "班次2",
        "班次3",
        "班次4",
        "班次5",
        "班次6",
        "班次7",
        "班次8",
        "班次9",
        "班次10",
        "班次11",
        "班次12",
      ],
      listss: [
        {
          month: "1",
          date: [{ day: "1", value: [{ name: "早班" }, { name: "晚班" }] }],
        },
      ],
      searchValue: "",
      navSts: 0,

      tabNums: 0,
      minClas: 0,
      // 底部分类滑动描点
      minSelCrts: null,

      tabNumss: 0,
      minClass: 0,
      // 底部分类滑动描点
      minSelCrtss: null,
    };
  },
  onReady() {
    // 如果需要兼容微信小程序的话，需要用此写法
    // this.$refs.calendar.setFormatter(this.formatter)
  },
  onShow() {
    _self = this;
    _self.topTitBox = _self.phoneInfo.statusBarHeight;
    _self.numList.unshift("全部");
    var today = new Date();
    var year = today.getFullYear();
    _self.maxDate = year + "-12-31";
    _self.minDate = year + "-1-1";
  },
  watch: {},
  methods: {
    handleGourl(val, index) {
      this.tabNum = index;
      this.cate_id = val.id;
      if (index > 0 && index < this.numList.length) {
        this.$nextTick(() => {
          this.minSelCrt = "minCla" + (index - 2);
        });
      }
    },
    handleGourls(val, index) {
      this.tabNums = index;
      this.cate_id = val.id;
      if (index > 0 && index < this.numList.length) {
        this.$nextTick(() => {
          this.minSelCrts = "minClas" + (index - 2);
        });
      }
    },
    handleGourlss(val, index) {
      this.tabNumss = index;
      this.cate_id = val.id;
      if (index > 0 && index < this.numList.length) {
        this.$nextTick(() => {
          this.minSelCrtss = "minClass" + (index - 2);
        });
      }
    },
    handleSearch() {
      console.log("hha");
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;

  .content {
    &-tab {
      background-color: #ffffff;
      padding: 24rpx 0;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1px solid #f5f5f5;
      text:nth-of-type(1) {
        font-size: 30rpx;
      }
      text:nth-of-type(2) {
        width: 138rpx;
        height: 4rpx;
        background-color: #fdb911;
        position: absolute;
        top: 93%;
      }
      .active {
        color: #333333;
        font-weight: 500;
      }
      .outactive {
        color: #999999;
      }
    }
    .rilis-top {
      padding: 22rpx;
      box-sizing: border-box;
      margin-top: 20rpx;
      background-color: #ffffff;
      .bottom {
        width: 16rpx;
        height: 8rpx;
        margin-left: 10rpx;
      }
    }
    .mains {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      padding: 30rpx;
      box-sizing: border-box;
      border-bottom: 1px solid red;
      justify-content: space-between;
      margin-bottom: 30rpx;
      &-all {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        font-size: 16px;
        text-align: center;
        white-space: nowrap;
        border-bottom: 1px solid #eeeeee;
        background-color: #ffffff;
        scroll-view {
          width: 71%;
        }
        &-one {
          width: 100%;
          display: flex;
          align-items: center;
          flex-flow: row nowrap;
          padding: 0 20rpx;
          box-sizing: border-box;
          text {
            margin-right: 40rpx;
            font-size: 26rpx;
            color: #333333;
          }
          .actives {
            color: red;
          }
        }
        &-title {
          padding: 22rpx 34rpx;
          box-sizing: border-box;
          text {
            display: inline-block;
            width: 100rpx;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
          }
        }
      }
    }
  }

  .rili {
    margin-top: 20rpx;
    background-color: #ffffff;
    height: 840rpx;
  }
  .big {
    width: 94%;
    margin: 24rpx auto;
    padding-bottom: 120rpx;
    box-sizing: border-box;
    .clockIn-order-bto {
      padding: 30rpx 24rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 12rpx;
      margin-top: 24rpx;
      &-title {
        padding-bottom: 16rpx;
        box-sizing: border-box;
        border-bottom: 1px solid #eaeaea;
        text:nth-of-type(1) {
          font-size: 26rpx;
          color: #333333;
          font-weight: bold;
        }
        text:nth-of-type(2) {
          font-size: 26rpx;
          color: #999999;
        }
      }
      &-one {
        margin-top: 20rpx;
        text:nth-of-type(1) {
          font-size: 26rpx;
          color: #333333;
        }
        text:nth-of-type(2) {
          font-size: 26rpx;
          color: #999999;
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: 106rpx;
    background-color: #ffffff;
    position: fixed;
    bottom: 0%;
    left: 0%;
    text {
      width: 152rpx;
      height: 58rpx;
      border-radius: 2em;
      font-size: 26rpx;
    }
    text:nth-of-type(1),
    text:nth-of-type(2) {
      border: 1px solid #e5e5e5;
    }
    text:nth-of-type(3) {
      border: 1px solid #e5e5e5;
      background: #e5e5e5;
    }
    text:nth-of-type(4) {
      border: 1px solid #fed227;
      background: #fed227;
    }
  }
}
</style>
